<template>
  <div>
    <div class="ruler animated" :class="isRuler?'fadeIn':'fadeOut'" v-if="isRuler">
      <span class="close" @click.passive.stop="closePanel"></span>
      <div class="dialog-panel">
        <div class="wrapper">
          <ul class="content">
            <li class="title">
              <span>活动时间</span>
            </li>
            <li>2019.1.31—2019.2.10</li>
            <li class="title">
              <span>参与方式</span>
            </li>
            <li>进入“江西联通”微信公众号点击菜单“梦.享”—“送你新年礼”</li>
            <li class="title">
              <span>参与用户</span>
            </li>
            <li>参与用户：关注且绑定“江西联通”的朋友</li>
            <li class="title">
              <span>活动奖品</span>
            </li>
            <li>爱奇艺视频VIP月卡、1G全国流量、200M全国流量、100M全国流量</li>
            <li class="title">
              <span>温馨提示</span>
            </li>
            <li>1、进入活动页面，任选一道特色菜肴，选取完毕，邀请好友助力收集食材，完成后即可获得沃妹送出的新年礼盒，百分百有奖；</li>
            <li>2、活动期间每位朋友仅可参加一次；</li>
            <li>3、每人每天仅有1次助力好友收集食材的机会；</li>
            <li>4、获得爱奇艺视频VIP月卡的朋友请及时到特权中心领取并兑换会员；</li>
            <li>5、获得100M全国流量的朋友请注意，流量将在活动结束后的7个工作日内赠送到你填写的江西联通手机号中；</li>
            <li>6、获得1G、200M全国流量的朋友请注意，流量将在活动结束后的7个工作日内赠送到你所绑定的江西联通手机号中；</li>
            <li
              class="tips"
            >ps:冰激凌套餐、4G组合套餐、智慧沃家、猴王卡、副卡、无线上网卡、日租卡、号码状态为停机、未开通漫游功能、近期有在办业务或是黑名单等号码，流量奖品将无法充值成功；</li>
            <li>7、活动期间有任何疑问，请拨打10010。</li>
          </ul>
          <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {

    }
  },
  props: {
    isRuler: {
      type: Boolean, required: true
    }
  },
  mounted() {

  },
  methods: {
    closePanel() {
      this.$emit('closeRuler', false)
    }
  },
}
</script>
<style lang="less" scoped>
.ruler {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 640px;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .close {
    position: relative;
    z-index: 999;
    margin-right: 100px;
    margin-bottom: -40px;
    align-self: flex-end;
    width: 45px;
    height: 43px;
    background: url("../assets/images/close.png") no-repeat;
    background-size: 45px 43px;
  }
  .dialog-panel {
    width: 588px;
    height: 792px;
    overflow: hidden;
    background: url("../assets/images/dialog-panel.png") no-repeat;
    background-size: 588px 792px;
  }
  .wrapper {
    margin: 120px 0;
    padding: 0 100px;
    width: 588px;
    height: 560px;
    overflow: hidden;
    .content {
      .title {
        margin: 20px 0;
      }
      .tips {
        font-size: 14px;
      }
      li {
        font-size: 18px;
        color: #fff;
        line-height: 1.5em;
        margin: 5px 0;

        span {
          border-radius: 8px;
          display: inline-block;
          padding: 5px 10px;
          background: #ff9c0f;
        }
      }
    }
  }
}
</style>
